<template>
  <div class="review-time-setting-container">
    <!-- 页面标题区 -->
    <div class="page-header">
      <h2>评审时间设置</h2>
      <p style="color: #86909c; margin-bottom: 20px;">管理评审活动及各专业组的评审时间段</p>
    </div>

    <!-- 核心：评审活动管理区 -->
    <div class="activity-management-bar">
      <div class="activity-select-group">
        <!-- 评审活动选择下拉框 -->
        <el-select
            v-model="selectedActivityId"
            placeholder="请选择评审活动"
            style="width: 320px;"
            @change="handleActivityChange"
        >
          <el-option
              v-for="activity in reviewActivities"
              :key="activity.id"
              :label="activity.name"
              :value="activity.id"
              :disabled="activity.status === '已结束'"
          >
            <!-- 活动状态小图标 -->
            <span v-if="activity.status === '已开始'" style="color: #faad14; margin-right: 4px;">●</span>
            <span v-if="activity.status === '已结束'" style="color: #86909c; margin-right: 4px;">●</span>
            {{ activity.name }}
          </el-option>
        </el-select>

        <!-- 当前活动状态标签 -->
        <el-tag :type="getActiveActivityStatusType()" v-if="selectedActivityId" class="activity-status-tag">
          {{ getActiveActivityStatusText() }}
          <span v-if="getActiveActivityDateText()" style="margin-left: 8px; font-size: 12px;">
            ({{ getActiveActivityDateText() }})
          </span>
        </el-tag>
      </div>

      <!-- 活动操作按钮 -->
      <div class="activity-action-buttons">
        <el-button type="primary" icon="el-icon-plus" @click="openAddActivityDialog">
          新增评审活动
        </el-button>
        <el-button
            type="default"
            icon="el-icon-edit"
            @click="openEditActivityDialog"
            :disabled="!selectedActivityId"
        >
          编辑活动
        </el-button>
        <el-button
            type="danger"
            icon="el-icon-delete"
            @click="deleteReviewActivity"
            :disabled="!selectedActivityId || getActiveActivityStatusText() === '已开始'"
        >
          删除活动
        </el-button>
      </div>
    </div>

    <!-- 专业组时间设置区 -->
    <div class="card-container">
      <!-- 添加专业组时间按钮 -->
      <div style="margin-bottom: 20px; text-align: right;">
        <el-button
            type="primary"
            @click="addTimeSetting"
            :disabled="!selectedActivityId || getActiveActivityStatusText() === '已结束'"
        >
          <i class="fa fa-plus"></i> 添加专业组时间设置
        </el-button>
      </div>

      <!-- 专业组时间列表（按当前活动筛选） -->
      <div
          v-for="(setting, index) in filteredTimeSettings"
          :key="setting.id"
          class="time-setting-item"
      >
        <!-- 专业组标题与操作 -->
        <div class="time-setting-header">
          <h4>
            <el-tag type="primary">{{ setting.specialty }}</el-tag>
            <!-- 时间状态标识 -->
            <span v-if="isSettingExpired(setting)" class="status-expired">
              <i class="fa fa-exclamation-circle"></i> 已过期
            </span>
            <span v-if="isSettingActive(setting)" class="status-active">
              <i class="fa fa-clock-o"></i> 评审进行中
            </span>
          </h4>
          <div class="time-setting-actions">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editTimeSetting(index)"
                :disabled="getActiveActivityStatusText() === '已结束'"
            >
              编辑
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                class="delete-btn"
                @click="deleteTimeSetting(index)"
                :disabled="getActiveActivityStatusText() === '已结束'"
            >
              删除
            </el-button>
          </div>
        </div>

        <!-- 时间选择器组 -->
        <div class="time-picker-group">
          <div class="time-picker-item">
            <el-form-item label="申报开始时间">
              <el-date-picker
                  v-model="setting.applyStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="time-picker-item">
            <el-form-item label="申报截止时间">
              <el-date-picker
                  v-model="setting.applyEndTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="time-picker-item">
            <el-form-item label="评审开始时间">
              <el-date-picker
                  v-model="setting.reviewStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="time-picker-item">
            <el-form-item label="评审截止时间">
              <el-date-picker
                  v-model="setting.reviewEndTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  disabled
              ></el-date-picker>
            </el-form-item>
          </div>
        </div>

        <!-- 公示时间 -->
        <div class="publish-time-container">
          <el-form-item label="评审结果公示时间">
            <el-date-picker
                v-model="setting.publishTime"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                disabled
            ></el-date-picker>
          </el-form-item>
        </div>
      </div>

      <!-- 空状态提示 -->
      <div v-if="filteredTimeSettings.length === 0 && !isLoading" class="empty-state">
        <el-empty
            description="当前评审活动暂无专业组时间设置"
            :image="elEmptyImage"
        >
          <el-button
              type="primary"
              @click="addTimeSetting"
              :disabled="!selectedActivityId || getActiveActivityStatusText() === '已结束'"
          >
            去添加专业组时间
          </el-button>
        </el-empty>
      </div>

      <!-- 保存/重置按钮 -->
      <div class="save-reset-buttons">
        <el-button
            type="primary"
            @click="saveAllTimeSettings"
            :disabled="!selectedActivityId || getActiveActivityStatusText() === '已结束'"
        >
          <i class="fa fa-save"></i> 保存所有设置
        </el-button>
        <el-button
            style="margin-left: 10px;"
            @click="resetTimeSettings"
            :disabled="!selectedActivityId || getActiveActivityStatusText() === '已结束'"
        >
          重置
        </el-button>
      </div>
    </div>

    <!-- 1. 专业组时间设置对话框 -->
    <el-dialog
        title="设置专业组评审时间"
        :visible.sync="timeSettingDialogVisible"
        width="60%"
        top="10%"
    >
      <el-form
          :model="currentTimeSetting"
          label-width="150px"
          ref="timeSettingForm"
          :rules="timeSettingRules"
      >
        <el-form-item label="专业组" prop="specialty">
          <el-select
              v-model="currentTimeSetting.specialty"
              placeholder="请选择专业组"
              :disabled="isEditingTimeSetting"
          >
            <el-option label="油气勘探" value="油气勘探"></el-option>
            <el-option label="油气藏工程" value="油气藏工程"></el-option>
            <el-option label="钻采与地面工程" value="钻采与地面工程"></el-option>
            <el-option label="信息工程" value="信息工程"></el-option>
          </el-select>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="申报开始时间" prop="applyStartTime">
              <el-date-picker
                  v-model="currentTimeSetting.applyStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :disabled="getActiveActivityStatusText() === '已结束'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申报截止时间" prop="applyEndTime">
              <el-date-picker
                  v-model="currentTimeSetting.applyEndTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :disabled="getActiveActivityStatusText() === '已结束'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="评审开始时间" prop="reviewStartTime">
              <el-date-picker
                  v-model="currentTimeSetting.reviewStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :disabled="getActiveActivityStatusText() === '已结束'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评审截止时间" prop="reviewEndTime">
              <el-date-picker
                  v-model="currentTimeSetting.reviewEndTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm"
                  :disabled="getActiveActivityStatusText() === '已结束'"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="评审结果公示时间" prop="publishTime">
          <el-date-picker
              v-model="currentTimeSetting.publishTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :disabled="getActiveActivityStatusText() === '已结束'"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="timeSettingDialogVisible = false">取消</el-button>
        <el-button
            type="primary"
            @click="saveTimeSetting"
            :disabled="getActiveActivityStatusText() === '已结束'"
        >
          保存
        </el-button>
      </div>
    </el-dialog>

    <!-- 2. 评审活动编辑对话框 -->
    <el-dialog
        :title="isEditingActivity ? '编辑评审活动' : '新增评审活动'"
        :visible.sync="activityDialogVisible"
        width="500px"
        top="15%"
    >
      <el-form
          :model="currentActivity"
          label-width="120px"
          ref="activityForm"
          :rules="activityRules"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input
              v-model="currentActivity.name"
              placeholder="请输入评审活动名称"
              maxlength="50"
              show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="活动状态" prop="status">
          <el-select v-model="currentActivity.status" placeholder="请选择活动状态">
            <el-option label="未开始" value="未开始"></el-option>
            <el-option label="已开始" value="已开始"></el-option>
            <el-option label="已结束" value="已结束"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="活动整体时间">
          <el-date-picker
              v-model="currentActivity.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="活动描述">
          <el-input
              v-model="currentActivity.description"
              type="textarea"
              rows="3"
              placeholder="可选：说明活动目的、覆盖范围等"
              maxlength="200"
              show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="activityDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveReviewActivity">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReviewTimeSetting',
  data() {
    return {
      // 1. 评审活动数据
      reviewActivities: [
        {
          id: 'act_2024',
          name: '2024年度油气行业评审活动',
          status: '未开始',
          startDate: '2024-05-01',
          endDate: '2024-06-30',
          description: '覆盖油气勘探、油气藏工程等4个专业组的年度常规评审'
        },
        {
          id: 'act_2025_new',
          name: '2025年度新技术专项评审',
          status: '已开始',
          startDate: '2025-03-10',
          endDate: '2025-04-20',
          description: '针对本年度新研发技术的专项评审，重点关注技术创新性'
        },
        {
          id: 'act_2023_old',
          name: '2023年度评审活动',
          status: '已结束',
          startDate: '2023-04-01',
          endDate: '2023-05-15',
          description: '2023年度常规评审，已完成所有专业组评审工作'
        }
      ],
      selectedActivityId: 'act_2024', // 默认选中2024年度活动
      activityDialogVisible: false,   // 活动对话框显示状态
      currentActivity: {},            // 当前编辑的活动
      isEditingActivity: false,       // 是否为编辑模式

      // 2. 专业组时间设置数据
      timeSettings: [
        {
          id: 1,
          activityId: 'act_2024',
          specialty: '油气勘探',
          applyStartTime: '2024-05-01 00:00',
          applyEndTime: '2024-05-20 23:59',
          reviewStartTime: '2024-05-25 00:00',
          reviewEndTime: '2024-06-10 23:59',
          publishTime: '2024-06-15'
        },
        {
          id: 2,
          activityId: 'act_2024',
          specialty: '油气藏工程',
          applyStartTime: '2024-05-01 00:00',
          applyEndTime: '2024-05-20 23:59',
          reviewStartTime: '2024-05-25 00:00',
          reviewEndTime: '2024-06-10 23:59',
          publishTime: '2024-06-15'
        },
        {
          id: 3,
          activityId: 'act_2025_new',
          specialty: '信息工程',
          applyStartTime: '2025-03-15 00:00',
          applyEndTime: '2025-03-25 23:59',
          reviewStartTime: '2025-03-30 00:00',
          reviewEndTime: '2025-04-10 23:59',
          publishTime: '2025-04-15'
        }
      ],
      timeSettingDialogVisible: false, // 时间设置对话框显示状态
      currentTimeSetting: {},          // 当前编辑的时间设置
      isEditingTimeSetting: false,     // 是否为编辑时间模式
      editedTimeSettingIndex: -1,      // 正在编辑的时间设置索引

      // 表单验证规则
      activityRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择活动状态', trigger: 'change' }
        ]
      },
      timeSettingRules: {
        specialty: [
          { required: true, message: '请选择专业组', trigger: 'change' }
        ],
        applyStartTime: [
          { required: true, message: '请选择申报开始时间', trigger: 'change' }
        ],
        applyEndTime: [
          { required: true, message: '请选择申报截止时间', trigger: 'change' }
        ],
        reviewStartTime: [
          { required: true, message: '请选择评审开始时间', trigger: 'change' }
        ],
        reviewEndTime: [
          { required: true, message: '请选择评审截止时间', trigger: 'change' }
        ],
        publishTime: [
          { required: true, message: '请选择公示时间', trigger: 'change' }
        ]
      },

      // 空状态图片
      elEmptyImage: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
    };
  },
  computed: {
    // 筛选当前活动下的专业组时间设置
    filteredTimeSettings() {
      return this.timeSettings.filter(item => item.activityId === this.selectedActivityId);
    },

    // 获取当前活动
    currentActiveActivity() {
      return this.reviewActivities.find(activity => activity.id === this.selectedActivityId);
    }
  },
  methods: {
    // 活动管理相关方法
    getActiveActivityStatusType() {
      const status = this.currentActiveActivity?.status;
      switch(status) {
        case '已开始': return 'warning';
        case '已结束': return 'info';
        default: return 'success';
      }
    },

    getActiveActivityStatusText() {
      return this.currentActiveActivity?.status || '';
    },

    getActiveActivityDateText() {
      if (this.currentActiveActivity) {
        return `${this.currentActiveActivity.startDate} 至 ${this.currentActiveActivity.endDate}`;
      }
      return '';
    },

    handleActivityChange() {
      // 切换活动时的逻辑
      this.$message.info(`已切换至：${this.currentActiveActivity?.name}`);
    },

    openAddActivityDialog() {
      this.isEditingActivity = false;
      this.activityDialogVisible = true;
      this.currentTimeSetting = {};
      this.currentActivity = {
        name: '',
        status: '未开始',
        dateRange: [],
        description: ''
      };
    },

    openEditActivityDialog() {
      if (!this.selectedActivityId) return;

      this.isEditingActivity = true;
      this.activityDialogVisible = true;
      const activity = this.currentActiveActivity;

      this.currentActivity = {
        ...activity,
        dateRange: activity.startDate ? [activity.startDate, activity.endDate] : []
      };
    },

    deleteReviewActivity() {
      this.$confirm(`确定要删除"${this.currentActiveActivity.name}"吗？删除后该活动下的所有专业组时间设置也将被删除`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除活动
        const activityIndex = this.reviewActivities.findIndex(a => a.id === this.selectedActivityId);
        this.reviewActivities.splice(activityIndex, 1);

        // 删除关联的时间设置
        this.timeSettings = this.timeSettings.filter(item => item.activityId !== this.selectedActivityId);

        // 重置选中状态
        this.selectedActivityId = this.reviewActivities.length > 0 ? this.reviewActivities[0].id : '';

        this.$message.success('评审活动已删除');
      }).catch(() => {
        // 取消操作
      });
    },

    saveReviewActivity() {
      this.$refs.activityForm.validate((valid) => {
        if (valid) {
          const activityData = {
            ...this.currentActivity,
            id: this.isEditingActivity ? this.selectedActivityId : `act_${Date.now()}`,
            startDate: this.currentActivity.dateRange?.[0] || '',
            endDate: this.currentActivity.dateRange?.[1] || ''
          };

          // 移除临时属性
          delete activityData.dateRange;

          if (this.isEditingActivity) {
            // 编辑现有活动
            const index = this.reviewActivities.findIndex(a => a.id === this.selectedActivityId);
            this.reviewActivities.splice(index, 1, activityData);
            this.$message.success('评审活动已更新');
          } else {
            // 添加新活动
            this.reviewActivities.push(activityData);
            this.selectedActivityId = activityData.id;
            this.$message.success('评审活动已创建');
          }

          this.activityDialogVisible = false;
        }
      });
    },

    // 时间设置相关方法
    isSettingExpired(setting) {
      const now = new Date();
      const endTime = new Date(setting.reviewEndTime);
      return now > endTime;
    },

    isSettingActive(setting) {
      const now = new Date();
      const startTime = new Date(setting.reviewStartTime);
      const endTime = new Date(setting.reviewEndTime);
      return now >= startTime && now <= endTime;
    },

    addTimeSetting() {
      if (!this.selectedActivityId) return;

      this.timeSettingDialogVisible = true;
      this.isEditingTimeSetting = false;
      this.editedTimeSettingIndex = -1;
      this.currentTimeSetting = {
        id: Date.now(),
        activityId: this.selectedActivityId,
        specialty: '',
        applyStartTime: '',
        applyEndTime: '',
        reviewStartTime: '',
        reviewEndTime: '',
        publishTime: ''
      };
    },

    editTimeSetting(index) {
      this.timeSettingDialogVisible = true;
      this.isEditingTimeSetting = true;
      this.editedTimeSettingIndex = index;
      this.currentTimeSetting = {...this.filteredTimeSettings[index]};
    },

    deleteTimeSetting(index) {
      const setting = this.filteredTimeSettings[index];
      this.$confirm(`确定要删除${setting.specialty}的时间设置吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 找到原数组中的索引
        const originalIndex = this.timeSettings.findIndex(item => item.id === setting.id);
        this.timeSettings.splice(originalIndex, 1);
        this.$message.success('时间设置已删除');
      }).catch(() => {
        // 取消操作
      });
    },

    saveTimeSetting() {
      this.$refs.timeSettingForm.validate((valid) => {
        if (valid) {
          // 检查时间逻辑是否合理
          const applyStart = new Date(this.currentTimeSetting.applyStartTime);
          const applyEnd = new Date(this.currentTimeSetting.applyEndTime);
          const reviewStart = new Date(this.currentTimeSetting.reviewStartTime);
          const reviewEnd = new Date(this.currentTimeSetting.reviewEndTime);
          const publish = new Date(this.currentTimeSetting.publishTime);

          if (applyStart >= applyEnd) {
            this.$message.warning('申报开始时间不能晚于申报截止时间');
            return;
          }

          if (reviewStart <= applyEnd) {
            this.$message.warning('评审开始时间必须晚于申报截止时间');
            return;
          }

          if (reviewStart >= reviewEnd) {
            this.$message.warning('评审开始时间不能晚于评审截止时间');
            return;
          }

          if (publish <= reviewEnd) {
            this.$message.warning('公示时间必须晚于评审截止时间');
            return;
          }

          // 检查专业组是否已存在（新增时）
          if (!this.isEditingTimeSetting) {
            const exists = this.filteredTimeSettings.some(
                s => s.specialty === this.currentTimeSetting.specialty
            );
            if (exists) {
              this.$message.warning('该专业组的时间设置已存在');
              return;
            }
          }

          if (this.isEditingTimeSetting && this.editedTimeSettingIndex > -1) {
            // 更新现有设置
            const originalIndex = this.timeSettings.findIndex(
                item => item.id === this.filteredTimeSettings[this.editedTimeSettingIndex].id
            );
            this.timeSettings.splice(originalIndex, 1, this.currentTimeSetting);
            this.$message.success('时间设置已更新');
          } else {
            // 添加新设置
            this.timeSettings.push(this.currentTimeSetting);
            this.$message.success('时间设置已添加');
          }

          this.timeSettingDialogVisible = false;
        }
      });
    },

    saveAllTimeSettings() {
      // 模拟保存到服务器
      this.$message.success('所有时间设置已保存');
    },

    resetTimeSettings() {
      this.$confirm('确定要重置当前活动的所有时间设置吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 过滤出当前活动的设置并保留
        const otherSettings = this.timeSettings.filter(item => item.activityId !== this.selectedActivityId);

        // 重置为当前活动的初始设置
        const initialSettings = [
          {
            id: Date.now() + 1,
            activityId: this.selectedActivityId,
            specialty: '油气勘探',
            applyStartTime: '',
            applyEndTime: '',
            reviewStartTime: '',
            reviewEndTime: '',
            publishTime: ''
          },
          {
            id: Date.now() + 2,
            activityId: this.selectedActivityId,
            specialty: '油气藏工程',
            applyStartTime: '',
            applyEndTime: '',
            reviewStartTime: '',
            reviewEndTime: '',
            publishTime: ''
          }
        ];

        this.timeSettings = [...otherSettings, ...initialSettings];
        this.$message.success('时间设置已重置');
      }).catch(() => {
        // 取消操作
      });
    }
  }
};
</script>

<style scoped>
.review-time-setting-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.activity-management-bar {
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.activity-select-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.activity-status-tag {
  font-size: 12px;
  height: 28px;
  line-height: 28px;
}

.activity-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.time-setting-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  transition: all 0.3s;
}

.time-setting-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.time-setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.time-setting-actions {
  display: flex;
  gap: 5px;
}

.delete-btn {
  color: #ff4d4f !important;
}

.time-picker-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.time-picker-item {
  flex: 1;
  min-width: 250px;
}

.publish-time-container {
  margin-top: 15px;
}

.status-expired {
  margin-left: 10px;
  color: #ff4d4f;
  font-size: 12px;
}

.status-active {
  margin-left: 10px;
  color: #52c41a;
  font-size: 12px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.save-reset-buttons {
  text-align: center;
  margin-top: 30px;
}
</style>
